<template>
	<div class="comp-new">
		<el-form ref="newForm" :model="newForm" :label-width="120+'px'">
			<el-form-item label="所属分区：">{{activePartition.name}}</el-form-item>
			<el-form-item label="设备名称：" prop="name" :rules="[{ required: true, message: '请输入设备名称' }]">
		    	<el-input placeholder="请输入" v-model.trim="newForm.name"></el-input>
		  	</el-form-item>
		  	<el-form-item label="设备号：" prop="number" :rules="[{ required: true, message: '请输入设备号' }]">
		  		<el-input placeholder="请输入" type="text" v-model.trim="newForm.number"></el-input>
		  	</el-form-item>
            <el-form-item label="设备类型：" prop="deviceTypeId" :rules="[{ required: true, message: '请选择设备类型' }]">
                <el-select v-model="newForm.deviceTypeId" placeholder="请选择" clearable>
                    <el-option :label="item.name" :value="item.id" v-for="(item, key) in typeList" :key="key"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="系统类型：" prop="systemId" :rules="[{ required: true, message: '请选择系统类型' }]">
                <el-select v-model="newForm.systemId" placeholder="请选择" clearable>
                    <el-option :label="item.name" :value="item.id" v-for="(item, key) in systemList" :key="key"></el-option>
                </el-select>
            </el-form-item>
		</el-form>
	</div>	
</template>
<script>
import { mapState } from 'vuex'
export default {
	name: 'newMaintenanceDevice',
	props: {
        activePartition: {
			type: Object,
			default(){
				return {}
			},
		},
        typeList: {
            type: Array,
            default () {
                return []
            }
        },
		activeData: {
			type: Object,
			default(){
				return null
			},
		},
		businessId: { //企业ID
			type: String,
			default: ''
		},
	},
	computed: {
		...mapState([
			'scale'
		]),
	},
	watch: {
		activeData () {
			this.initForm()
		}
	},
	data () {
		return {
			newForm: {},
			loading: false,
            systemList: []
		}
	},
	created () {
        this.getSystem()
		this.initForm()
	},
	methods: {
        getSystem(){
            this.$get('/check/maintenance/maintenanceSystemList').then(res=>{
                this.systemList = res.data
            })
        },
		initForm () {
			if(this.activeData){
				this.newForm = Object.assign({},this.activeData)
			}else{
				this.newForm = {
                    partitionId: this.activePartition.id,
                    businessId: this.businessId
                }
				if(this.$refs['newForm']){
					this.$refs['newForm'].resetFields()
				}
			}
		},
		submitAction () {
			this.$refs['newForm'].validate((valid) => {
				if (valid) {
					this.$emit('submitting')
					this.loading = true
					let params = Object.assign({},this.newForm)
                    const selectedType = this.typeList.find(item=>item.id== this.newForm.deviceTypeId)
                    params.deviceTypeName = selectedType.name
                    this.$post('/check/maintenance/deviceAddOrUpdate', params).then(res=>{
                        this.loading = false
						this.$message.success('保存成功')
						this.$emit('success');
                    }, error => {
						this.loading = false
						this.$message.error(error.msg);
						this.$emit('fail');
					})
				} else {
					return false;
				}
			});
		},
	},
}
</script>